<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画结束</title>
    <style>
        .div{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>

</head>
<body>

<button>Toggle</button>
<button>stop</button>
<button>stop.toggle</button>
<button>finish</button>
<button>finish.toggle</button>
<div class="div"></div>

<script src="jquery-3.6.0.js"></script>
<script>
    /*
        结束动画：
          每点击一次就会记录累加动画次数，停止点击后，动画还会执行，直到执行完累计次数
            +这时就需要用到运动结束函数，让动画提前结束
            1.stop()
              =》当任何一个元素执行了stop方法以后，会立即结束当前的所有运动，目前运行到什么位置就停留在什么位置
              =》使用：一般对于结束动画的使用，都是在运动开始之前
            2.finish()
              =》当任何一个元素执行了stop方法以后，会立即结束当前的所有运动，直接去到动画结束位置
              =》使用：一般对于结束动画的使用，都是在运动开始之前

     */

    $('button:nth-child(1)').click(function () {
        $('.div').toggle(
            1000,
            'linear',
        )
    })

    //1.stop
    $('button:nth-child(2)').click(function () {
        $('.div').stop()
    })

    //利用结束动画书写动画函数
    //每次触发的时候，都会把之前的动画停止下来，只执行本次最新的动画
    $('button:nth-child(3)').click(function () {
        $('.div').stop().toggle(
            1000,
            'linear',
        )
    })

    //2.finish
    $('button:nth-child(4)').click(function () {
        $('.div').finish()
    })

    //利用完成动画书写动画函数
    //每次触发的时候，之前的动画都会瞬间完成，只执行本次最新动画
    $('button:nth-child(5)').click(function () {
        $('.div').finish().toggle(
            1000,
            'linear',
        )
    })
</script>

</body>
</html>